<template>
  <view>
    <!--先放個搜索-->
    <search_field @click="searchThing()"></search_field>
    <view class="info-list">
      <view class = "info-item-box" v-for="(information,i) in informationList" :key = "i">
        <view class = "info-item-left">
          <image :src="resourseUrl + information.img_url" style = "width:200rpx"mode = "widthFix" >
          </image>
        </view>
        
        <view class = "info-item-right">
          <view class = "title">{{information.title}}</view>
          <view class = "date">{{information.date}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import badgeMix from '@/store/tabbar-badge.js'
  import {mapState} from 'vuex'
  export default {
    mixins : [badgeMix],
    data() {
      return {
        informationList:[],
      };
    },
    onLoad(){
      this.getInformationList()
    },
    methods:{
      searchThing(){
        uni.navigateTo({
          url: '/subpackage/search/search'
        })
      },
      async getInformationList(){
        const {data:res} = await uni.$http.get('information/inf')
        if(res.meta.status !== 200){
          return uni.$showMessage()
        }
        this.informationList = res.data.list
      },
    },
    computed:{
      ...mapState('user',['resourseUrl']),
    }
  }
</script>

<style lang="scss">
.info-list{

  .info-item-box{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
    padding:10px 5px;
    border-bottom : 1px solid #F0F0F0;
    .info-item-right{
      display: flex;
      flex:1;
      flex-direction:column;
      justify-content: space-between;
      align-items:center
      .title{
        font-size:16px;
      }
      .date{
        font-size :12px;
      }
    }
  }
}
</style>
